/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-12 11:35:38
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-12 11:37:50
 * @FilePath: \vue3_admin_template\project\src\utils\echartWorldCloud\WordCloudView.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as echarts from 'echarts'

echarts.extendChartView({
  type: 'wordCloud',

  render: function (seriesModel, ecModel, api) {
    const group = this.group
    group.removeAll()

    const data = seriesModel.getData()

    const gridSize = seriesModel.get('gridSize')

    seriesModel.layoutInstance.ondraw = function (text, size, dataIdx, drawn) {
      const itemModel = data.getItemModel(dataIdx)
      const textStyleModel = itemModel.getModel('textStyle')
      const { option: label } = itemModel.getModel('label')
      const labelStyle = itemModel.getModel('labelStyle')

      const textEl = new echarts.graphic.Text({
        style: echarts.helper.createTextStyle(textStyleModel),
        scaleX: 1 / drawn.info.mu,
        scaleY: 1 / drawn.info.mu,
        x: (drawn.gx + drawn.info.gw / 2) * gridSize,
        y: (drawn.gy + drawn.info.gh / 2) * gridSize,
        rotation: drawn.rot,
      })
      textEl.setStyle({
        x: drawn.info.fillTextOffsetX,
        y: drawn.info.fillTextOffsetY + size * 0.5,
        text: text,
        verticalAlign: 'middle',
        fill: data.getItemVisual(dataIdx, 'style').fill,
        fontSize: size,
      })
      const textLabel = new echarts.graphic.Text({
        style: echarts.helper.createTextStyle(labelStyle),
        scaleX: 1 / drawn.info.mu,
        scaleY: 1 / drawn.info.mu,
        x: (drawn.gx + drawn.info.gw / 2) * gridSize,
        y: (drawn.gy + drawn.info.gh / 2) * gridSize,
        rotation: drawn.rot,
      })
      textLabel.setStyle({
        x: drawn.info.fillTextOffsetX + size * 0.45,
        y: drawn.info.fillTextOffsetY + size * 0.45,
        // text: label.length > 5 ? label.slice(0, 5) + '...' : label,
        text: label,
        align: 'center',
        verticalAlign: 'middle',
      })

      group.add(textEl)
      group.add(textLabel)

      data.setItemGraphicEl(dataIdx, textEl)

      textEl.ensureState('emphasis').style = echarts.helper.createTextStyle(
        itemModel.getModel(['emphasis', 'textStyle']),
        {
          state: 'emphasis',
        },
      )
      textEl.ensureState('blur').style = echarts.helper.createTextStyle(
        itemModel.getModel(['blur', 'textStyle']),
        {
          state: 'blur',
        },
      )

      echarts.helper.enableHoverEmphasis(
        textEl,
        itemModel.get(['emphasis', 'focus']),
        itemModel.get(['emphasis', 'blurScope']),
      )

      textEl.stateTransition = {
        duration: seriesModel.get('animation')
          ? seriesModel.get(['stateAnimation', 'duration'])
          : 0,
        easing: seriesModel.get(['stateAnimation', 'easing']),
      }
      // TODO
      textEl.__highDownDispatcher = true
    }

    this._model = seriesModel
  },

  remove: function () {
    this.group.removeAll()

    this._model.layoutInstance.dispose()
  },

  dispose: function () {
    this._model.layoutInstance.dispose()
  },
})
